<template>
	<view class="content">
		<image class="logo" src="@/static/home.png" mode="widthFix"></image>
		<view class="content-receive" @click="showFormDialog"></view>

		<up-popup :show="show" @close="close" mode="center" :round="10">
			<view class="receive-form">
				<up-form labelPosition="left" :model="model1" :rules="rules" ref="form1">
					<up-form-item label="优惠券名称" prop="userInfo.name" :borderBottom="true" ref="item1">
						<up-input v-model="model1.userInfo.name" placeholder="请输入" border="none"></up-input>
					</up-form-item>
					<up-form-item label="优惠券代码" prop="userInfo.name" :borderBottom="true" ref="item1">
						<up-input v-model="model1.userInfo.name" placeholder="请输入" border="none"></up-input>
					</up-form-item>
					<up-form-item label="优惠券类型" prop="userInfo.name" :borderBottom="true" ref="item1">
						<up-input v-model="model1.userInfo.name" placeholder="请输入" border="none"></up-input>
					</up-form-item>
					<up-form-item label="优惠券额度" prop="userInfo.name" :borderBottom="true" ref="item1">
						<up-input v-model="model1.userInfo.name" placeholder="请输入" border="none"></up-input>
					</up-form-item>
					<up-form-item label="使用有效开始日期" prop="userInfo.name" :borderBottom="true" ref="item1">
						<up-input v-model="model1.userInfo.name" placeholder="请输入" border="none"></up-input>
					</up-form-item>
					<up-form-item label="使用有效结束日期" prop="userInfo.name" :borderBottom="true" ref="item1">
						<up-input v-model="model1.userInfo.name" placeholder="请输入" border="none"></up-input>
					</up-form-item>
					<up-form-item label="优惠券领取开始日期" prop="userInfo.name" :borderBottom="true" ref="item1">
						<up-input v-model="model1.userInfo.name" placeholder="请输入" border="none"></up-input>
					</up-form-item>
					<up-form-item label="优惠券领取结束日期" prop="userInfo.name" :borderBottom="true" ref="item1">
						<up-input v-model="model1.userInfo.name" placeholder="请输入" border="none"></up-input>
					</up-form-item>
					<up-form-item label="使用规则" prop="userInfo.name" :borderBottom="true" ref="item1">
						<up-input v-model="model1.userInfo.name" placeholder="请输入" border="none"></up-input>
					</up-form-item>

					<up-form-item label="优惠券简介" prop="userInfo.name" :borderBottom="true" ref="item1">
						<up-input v-model="model1.userInfo.name" placeholder="请输入" border="none"></up-input>
					</up-form-item>
					<up-form-item label="适用对象" prop="userInfo.name" :borderBottom="true" ref="item1">
						<up-input v-model="model1.userInfo.name" placeholder="请输入" border="none"></up-input>
					</up-form-item>
					<up-form-item label="优惠券使用页面链接" prop="userInfo.name" :borderBottom="true" ref="item1">
						<up-input v-model="model1.userInfo.name" placeholder="请输入" border="none"></up-input>
					</up-form-item>
					<up-form-item label="优惠券领取接口" prop="userInfo.name" :borderBottom="true" ref="item1">
						<up-input v-model="model1.userInfo.name" placeholder="请输入" border="none"></up-input>
					</up-form-item>
					<up-form-item label="补贴提供单位名称" prop="userInfo.name" :borderBottom="true" ref="item1">
						<up-input v-model="model1.userInfo.name" placeholder="请输入" border="none"></up-input>
					</up-form-item>
					<up-form-item label="补贴提供单位代码" prop="userInfo.name" :borderBottom="true" ref="item1">
						<up-input v-model="model1.userInfo.name" placeholder="请输入" border="none"></up-input>
					</up-form-item>
					<up-form-item label="补贴咨询电话" prop="userInfo.name" :borderBottom="true" ref="item1">
						<up-input v-model="model1.userInfo.name" placeholder="请输入" border="none"></up-input>
					</up-form-item>
					<up-form-item label="企业logo" prop="userInfo.name" :borderBottom="true" ref="item1">
						<up-input v-model="model1.userInfo.name" placeholder="请输入" border="none"></up-input>
					</up-form-item>
					<up-form-item label="优惠券详情封面" prop="userInfo.name" :borderBottom="true" ref="item1">
						<up-input v-model="model1.userInfo.name" placeholder="请输入" border="none"></up-input>
					</up-form-item>

				</up-form>
			</view>
		</up-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				model1: {
					userInfo: {
						name: 'uView UI',
						sex: '',
					},
				},
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},

				},
				show: false
			}
		},
		methods: {
			showFormDialog() {
				this.show = true;
			},

			close() {
				this.show = false
			}
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;

		.receive-form {
			padding: 16rpx 32rpx;
			box-sizing: border-box;
		}

		&-receive {
			width: 150rpx;
			height: 60rpx;
			position: absolute;
			top: 118rpx;

			.form-container {
				padding: 20rpx;
			}

			.form-item {
				margin-bottom: 20rpx;
			}

			.form-label {
				font-size: 28rpx;
				margin-right: 10rpx;
			}

			.form-input {
				border: 1rpx solid #ccc;
				border-radius: 8rpx;
				padding: 10rpx;
				width: 100%;
			}
		}

		.logo {
			width: 750rpx;
			height: auto;
			margin-left: auto;
			margin-right: auto;
		}
	}
</style>